<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar
          backIconColor="#333333"
          title-size="36"
          title="订单列表"
          height="50"
          :is-back="true"
          :border-bottom="false"
          title-color="#333333"
        >
        </u-navbar>
      </view>
      <!-- <u-gap height="20" bg-color="#F0F1F2"></u-gap> -->
      <view
        @click="toDetail(item)"
        class="order-box"
        v-for="(item, index) in itemList"
        :key="index"
      >
        <view class="top dis-flex flex-y-between flex-y-center">
          <view class="no">交易单号：JHJ202312230001</view>
          <view class="status">待发货</view>
        </view>
        <u-line></u-line>
        <view class="content dis-flex">
          <u-image src="" width="160rpx" height="160rpx" border-radius="8"></u-image>
          <view class="info">
            <view class="name oneline-hide-1">商品名称商品名称商品</view>
            <view class="num dis-flex flex-y-between flex-y-center">
              <view>数量</view>
              <view>x1</view>
            </view>
            <view class="points">赠送70联盟豆</view>
            <view class="price"> ¥<text class="bold">70</text> </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      itemList: [{}, {}]
    }
  },
  methods: {
    toDetail() {
      this.$utils.route('/alliance/order-detail')
    },
    queryList(page, pageSize) {}
  }
}
</script>

<style scoped lang="scss">
.order-box {
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
  .top {
    margin-bottom: 20rpx;
    .no {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
    }
    .status {
      font-size: 28rpx;
      color: #666666;
    }
  }
  .content {
    margin-top: 20rpx;

    .info {
      flex: 1;
      margin-left: 20rpx;
      .name {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 10rpx;
      }
      .num {
        font-size: 24rpx;
        color: #999999;
        margin-bottom: 10rpx;
      }
      .points {
        font-size: 24rpx;
        color: #ff6f10;
        margin-bottom: 10rpx;
      }
      .price {
        font-size: 26rpx;
        color: #fa453c;
      }
      .bold {
        font-size: 32rpx;
        font-weight: 600;
      }
    }
  }
}
</style>
